<template>
  <el-dialog :title="!dataForm.id ?'新增':'修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">

      <el-form-item label="游戏名称" prop="gameName">
        <el-input v-model="dataForm.gameName" placeholder="请输入游戏名称" maxlength="30" show-word-limit clearable  style="width: 100%;"></el-input>
      </el-form-item>
      <div></div>
      <el-form-item label="游戏平台" prop="platform">
        <el-radio-group v-model="dataForm.platform">
          <el-radio label="PC平台">PC平台</el-radio>
          <el-radio label="主机平台">主机平台</el-radio>
          <el-radio label="移动平台">移动平台</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="游戏类型" prop="gameType" >
        <el-checkbox-group v-model="dataForm.gameType"  >
            <el-checkbox  v-for="type in types" :label="type.name" :key="type.name"></el-checkbox>
        </el-checkbox-group>x
        
      </el-form-item>
   
      <el-form-item label="年龄分级" prop="ageGroup"  >
        <el-select v-model="dataForm.ageGroup" placeholder="请选择年龄分级">
          <el-option v-for="age in ages" :key="age.value" :label="age.name" :value="age.name">
            <span style="float:left" >"{{ age.name }}":</span>
            <span style="float:left; color: #8492a6; font-size: 13px">{{ age.value }}</span>
          </el-option>
         </el-select>
      </el-form-item>
             
      <el-form-item label="价格" prop="price"  >
        <el-input-number v-model="dataForm.price" :precision="2" :step="0.01" ></el-input-number>
      </el-form-item>
    
      <el-form-item label="上线时间" prop="launchTime">
         <el-date-picker v-model="dataForm.launchTime" type="datetime" placeholder="选择日期时间" ></el-date-picker>  
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible=false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>



<script>
import dayjs from 'dayjs';
//const typeOptions=['角色扮演', '射击', '战略', '模拟', '冒险', '动作', '运动', '沙盒', '多人在线', '恐怖'];
  export default{
    
    data(){
      return{
        dictList:[],
        types:[],
        visible:false,
        dataForm:{
          id:0,
          gameName:'',
          platform:'',
          gameType:[],
          ageGroup:'',
          price:'',
          launchTime:''
        },
        ages:[],
        // ages:[{
        //   value: '包含些许卡通暴力、相对含蓄的不良语句等内容',
        //   label: '8+'
        // }, {
        //   value: '包含少量的轻微暴力、不良语句、轻微性暗示及惊吓场景等内容',
        //   label: '12+'
        // }, {
        //   value: '包含少量现实场景暴力、不良语句、性暗示及恐怖场景等内容',
        //   label: '16+'
        // }, {
        //   value: '包含较多涉及两性、金融等题材相关内容',
        //   label: '18+'
        // }],
        dataRule:{
          gameName:[
            {required:true, message: '游戏名称不能为空',trigger:'blur'}
          ],
          platform:[
            {required: true, message:'请选择游戏平台',trigger:'blur'}
          ],
          gameType:[
            {required: true, message:'至少选择一个游戏类型',trigger:'blur'}
          ],      
          ageGroup:[
            {required: true, message:'请选择年龄分级',trigger:'blur'}
          ],
          launchTime:[
            {required: true, message:'请选择上线时间',trigger:'blur'}
          ],
          // price:[
          //   {required: true, message:'价格不能为空',trigger:'blur'}
          // ]

        }
      }
    },
    methods:{
      init(id){
        this.dataForm.id=id||0
        this.$http({
          url:this.$http.adornUrl('/game/dict/list'),
          method:'get',
          params:this.$http.adornParams()
        }).then(({data})=>{
          this.types=data.dictMap.gameTypeList
          this.ages=data.dictMap.ageGroupList
        }).then(() => {
          
        this.visible=true
        this.$nextTick(()=>{
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id){
            this.$http({
              url:this.$http.adornUrl(`/game/info/${this.dataForm.id}`),
              method:'get',
              params:this.$http.adornParams()
            }).then(({data})=>{
              if (data&&data.code===0) {
               this.dataForm.gameName=data.game.gameName
               this.dataForm.platform=data.game.platform
                this.dataForm.gameType=data.game.gameType.split(',')
                this.dataForm.ageGroup=data.game.ageGroup
                this.dataForm.price=data.game.price
                this.dataForm.launchTime=data.game.launchTime
              }
            })
          }
        })
      })
      },
      dataFormSubmit(){
        this.$refs['dataForm'].validate((valid)=>{
          if (valid){
            this.$http({
              url:this.$http.adornUrl(`/game/${!this.dataForm.id?'save':'update'}`),
              method:'post',
              data:this.$http.adornData({
                'id':this.dataForm.id||undefined,
                'gameName':this.dataForm.gameName,
                'platform':this.dataForm.platform,
                'gameType':this.dataForm.gameType.join(','),
                'ageGroup':this.dataForm.ageGroup,
                'price':this.dataForm.price,
                'launchTime':dayjs(this.dataForm.launchTime).format('YYYY-MM-DD HH:mm:ss')
              })
            }).then(({data})=>{
              if (data&&data.code===0) {
                this.$message({
                  message:'操作成功',
                  type:'success',
                  duration:1500,
                  onClose:() =>{
                    this.visible=false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
